import { useEffect, useMemo, useState } from "react"
import { createPortal } from "react-dom"
import { Space, Popconfirm } from "antd"
import { useComponentsStore, getComponentById } from "../../stores/components"
import { DeleteOutlined } from '@ant-design/icons'
interface SelectedMask {
    containerClassName: string,
    portalWrapperClassName: string,
    componentId: number
}
//点击时展示的蒙层
export default function SelectedMask({ containerClassName, portalWrapperClassName, componentId }: SelectedMask) {
    //containerClassName表示组件展示区的最外层容器(后续可用于定位)，portalWrapperClassName表示挂载蒙层的组件，componentId表示点击的组件的id
    const { components, curComponentId ,deleteComponent,setCurComponentId} = useComponentsStore()
    const [position, setPosition] = useState({
        top: 0,
        left: 0,
        width: 0,
        height: 0,
        labelTop: 0,//垃圾桶的位置
        labelLeft: 0,//垃圾桶的位置
    })
    useEffect(() => {//更新蒙层的位置
        updataPosition()
    }, [componentId])
    useEffect(()=>{
       const resizeHandler=()=>{
        updataPosition()
       } 
       window.addEventListener('resize',resizeHandler)
       return ()=>{//组件卸载时移除事件监听
        window.removeEventListener('resize',resizeHandler)
       }
    },[])
    function updataPosition() {
        if (!componentId) {
            return
        }
        const container = document.querySelector(`.${containerClassName}`)//获取组件展示区最外层的div
        if (!container) {
            return
        }
        const node = container.querySelector(`[data-component-id="${componentId}"]`)//获取到被点击的组件的div
        if (!node) {
            return
        }
        //获取到被点击的组件的几何属性
        const { top, left, width, height } = node.getBoundingClientRect()
        //获取最外层容器的几何属性
        const { top: containerTop, left: containerLeft } = container.getBoundingClientRect()
        let labelTop = top - containerTop + container.scrollTop
        let labelLeft = left - containerLeft + width
        if (labelTop <= 0) {
            labelTop += 20
        }
        //给蒙层设置几何属性
        setPosition({
            top: top - containerTop + container.scrollTop,
            left: left - containerLeft + container.scrollTop,
            width,
            height,
            labelTop,
            labelLeft
        })
    }
    const el = useMemo(() => {
        // const el=document.createElement('div')//创建一个div容器
        // el.className='wrapper'
        // const container=document.querySelector(`.${containerClassName}`)//找到组件容器
        // container!.appendChild(el)//添加一个空div作为子组件,让蒙层的div添加到子组件上
        // return el
        return document.querySelector(`.${portalWrapperClassName}`)//将蒙层的组件添加到该类名的div上
    }, [])
    const curComponent = useMemo(() => {//找到被点击的组件对象
        return getComponentById(componentId, components)
    }, [componentId])
    //删除该组件(就是将仓库中的json数据删除掉某个小结点)
    const handleDelete = () => {
        deleteComponent(curComponentId as number)
        setCurComponentId(null!)//断言成希望的类型
    }
    
    return createPortal((
        <>
            <div
                style={{
                    position: 'absolute',
                    top: position.top,
                    left: position.left,
                    width: position.width,
                    height: position.height,
                    background: 'rgba(0,0,255,0.1)',
                    border: '1px dashed bule',
                    borderRadius: '4px',
                    boxSizing: 'border-box',
                    pointerEvents: 'none',//鼠标事件为none
                    zIndex: 14,//层级
                }}
            >
            </div>
            <div
                    style={{
                        position: 'absolute',
                        top: position.labelTop,
                        left: position.labelLeft,
                        fontSize: 14,
                        zIndex: 15,
                        display: (!position.width || position.width < 10) ? 'none' : 'inline',
                        transform: 'translate(-100%,-100%)',
                        cursor: 'pointer'
                    }}>
                    <Space>
                        <div style={{
                            padding: '0 8px',
                            backgroundColor: 'blue',
                            color: 'white',
                            borderRadius: 4,
                            cursor: 'pointer',
                            whiteSpace: 'nowrap',
                        }}
                        >
                            {/* 组件名称 */}
                            {curComponent?.desc}
                        </div>
                        {
                            curComponentId !== 1 && (
                                <div style={{ padding: '0 8px', backgroundColor: 'blue' }}>
                                    <Popconfirm
                                        title="确认删除？"
                                        onConfirm={handleDelete}
                                        okText="确认"
                                        cancelText="取消"
                                    >
                                        {/* 删除图标 */}
                                        <DeleteOutlined style={{ color: 'white' }} />
                                    </Popconfirm>
                                </div>
                            )
                        }
                    </Space>
                </div>
        </>
    ), el as HTMLElement)
}
